<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside class="aside" :style="{width:`${isCollapse?65:240}px`, transition: '0.4s'}">
        <el-menu 
        router
          default-active="index"
          background-color="#345"
          
          text-color="#ddd"
          :style="{height: '100vh'}"
          :collapse="isCollapse"
          class="el-menu-vertical-demo">
          <el-menu-item>
            
            <template slot="title">
              <span style="font-size: 1.2em; color:#efefef; font-weight: bold;">&nbsp;&nbsp;FITNESS&nbsp;后台管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="index">
            <i class="el-icon-s-home"></i>
            <template slot="title">
              首页
            </template>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-mobile"></i>
              <span slot="title">课程管理</span>
            </template>
            <el-menu-item index="/home/course-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">课程列表</span>
            </el-menu-item>
            <el-menu-item index="/home/course-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增课程</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-office-building"></i>
              <span slot="title">健身房管理</span>
            </template>
            <el-menu-item index="/home/gym-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">健身房列表</span>
            </el-menu-item>
            <el-menu-item index="/home/gym-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增健身房</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-shopping-bag-1"></i>
              <span slot="title">商城管理</span>
            </template>
            <el-menu-item index="/home/product-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">商品列表</span>
            </el-menu-item>
            <el-menu-item index="/home/product-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增商品</span>
            </el-menu-item>
          </el-submenu>
          <!-- <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/home/user-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
            <el-menu-item index="/home/user-management">
              <i class="el-icon-setting"></i>
              <span slot="title">管理用户</span>
            </el-menu-item>
          </el-submenu> -->
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-loading"></i>
              <span slot="title">动态管理</span>
            </template>
            <el-menu-item index="/home/trends-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">动态列表</span>
            </el-menu-item>
            <!-- -->
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-video-play "></i>
              <span slot="title">专题管理</span>
            </template>
            <el-menu-item index="/home/subject-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">专题列表</span>
            </el-menu-item>
            <el-menu-item index="/home/subject-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增专题</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i v-show="!isCollapse" class="el-icon-s-fold" @click="isCollapse=true"></i>
          <i v-show="isCollapse" class="el-icon-s-unfold" @click="isCollapse=false"></i>
        
          &nbsp;&nbsp;
          &nbsp;&nbsp;
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/" style="flex:1;">
            <el-breadcrumb-item
              v-for="item in $route.meta.thumbs" 
              :key="item.name ? item.name:item"
              :to="item.to ? item.to:''">
              {{item.name ? item.name:item}}
            </el-breadcrumb-item>
          </el-breadcrumb>
          
          <span><i class="el-icon-user-solid"></i>&nbsp;&nbsp;<span style="font-size: 14px;">admin</span></span>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false
    }
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
}
.aside::-webkit-scrollbar {
  display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }
</style>
